<template>
  <el-dialog
    :visible.sync="taskCreatedBatchInnerDialogVisible"
    width="40%"
    top="80px"
    style="min-width: 791px"
    :before-close="closeDialog"
    @open="open()"
    :append-to-body="isInner"
  >
    <span slot="title" class="title">{{ $t("taskDialog.title.time") }}</span>
    <div class="main" style="padding-left: 30px">
      <el-select
        size="small"
        v-model="taskConfigTime.taskType"
        :placeholder="$t('taskDialog.table.select')"
        @change="taskTypeChange"
        style="width: 150px; margin-bottom: 20px"
      >
        <el-option
          v-for="(item, index) in $t('taskDialog.main.options')"
          :key="index"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div class="time">
        <!-- :rules="formDataRules" -->
        <el-form
          :model="taskConfigTime"
          ref="taskConfigTimeRef"
          label-width="0"
          class="demo-ruleForm"
        >
          <!-- 日常任务 -->
          <div
            class="taskTime daily"
            v-show="taskConfigTime.taskType == '日常任务' ? true : false"
          >
            <el-form-item prop="hour">
              <el-input
                size="small"
                v-model="taskConfigTime.hour"
                @blur="addZero"
              ></el-input>
              <span>{{ $t("taskDialog.main.date.h") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>0-23</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-form-item prop="minute">
              <el-input
                size="small"
                v-model="taskConfigTime.minute"
                @blur="addZero"
              ></el-input
              ><span>{{ $t("taskDialog.main.date.m") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>0-59</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-form-item prop="second">
              <el-input
                size="small"
                v-model="taskConfigTime.second"
                @blur="addZero"
              ></el-input
              ><span>{{ $t("taskDialog.main.date.s") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>0-59</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-date-picker
              v-model="taskConfigTime.dateRange"
              value-format="yyyy-MM-dd"
              type="daterange"
              :start-placeholder="$t('taskDialog.main.date.start')"
              :end-placeholder="$t('taskDialog.main.date.end')"
            >
            </el-date-picker>
          </div>
          <!-- 周任务 -->
          <div
            class="taskTime weekly"
            v-show="taskConfigTime.taskType == '周任务' ? true : false"
          >
            <el-form-item prop="day_of_week">
              <span>{{ $t("taskDialog.main.date.w") }}</span
              ><el-input
                size="small"
                v-model="taskConfigTime.day_of_week"
              ></el-input>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>1-7</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * ? / L #</strong>
              </div>
            </el-form-item>
            <el-form-item prop="hour">
              <el-input
                size="small"
                v-model="taskConfigTime.hour"
                @blur="addZero"
              ></el-input
              ><span>{{ $t("taskDialog.main.date.h") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>0-23</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-form-item prop="minute">
              <el-input
                size="small"
                v-model="taskConfigTime.minute"
                @blur="addZero"
              ></el-input
              ><span>{{ $t("taskDialog.main.date.m") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>0-59</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-form-item prop="second">
              <el-input
                size="small"
                v-model="taskConfigTime.second"
                @blur="addZero"
              ></el-input
              ><span>{{ $t("taskDialog.main.date.s") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>0-59</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-date-picker
              v-model="taskConfigTime.dateRange"
              value-format="yyyy-MM-dd"
              type="daterange"
              :start-placeholder="$t('taskDialog.main.date.start')"
              :end-placeholder="$t('taskDialog.main.date.end')"
            >
            </el-date-picker>
          </div>
          <!-- 月任务 -->
          <div
            class="taskTime mouthly"
            v-show="taskConfigTime.taskType == '月任务' ? true : false"
          >
            <el-form-item prop="day">
              <el-input size="small" v-model="taskConfigTime.day"></el-input
              ><span>{{ $t("taskDialog.main.date.d") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>1-31</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * ? / L W</strong>
              </div>
            </el-form-item>
            <el-form-item prop="hour">
              <el-input
                size="small"
                v-model="taskConfigTime.hour"
                @blur="addZero"
              ></el-input
              ><span>{{ $t("taskDialog.main.date.h") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>0-23</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-form-item prop="minute">
              <el-input
                size="small"
                v-model="taskConfigTime.minute"
                @blur="addZero"
              ></el-input
              ><span>{{ $t("taskDialog.main.date.m") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>0-59</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-form-item prop="second">
              <el-input
                size="small"
                v-model="taskConfigTime.second"
                @blur="addZero"
              ></el-input
              ><span>{{ $t("taskDialog.main.date.s") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>0-59</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-date-picker
              v-model="taskConfigTime.dateRange"
              value-format="yyyy-MM-dd"
              type="daterange"
              :start-placeholder="$t('taskDialog.main.date.start')"
              :end-placeholder="$t('taskDialog.main.date.end')"
            >
            </el-date-picker>
          </div>
          <!-- 定时/计划任务 -->
          <div
            class="taskTime plan"
            v-show="taskConfigTime.taskType == '定时/计划任务' ? true : false"
          >
            <el-form-item>
              <el-input size="small" v-model="taskConfigTime.year"></el-input
              ><span>{{ $t("taskDialog.main.date.y") }}</span>
              <div>
                {{
                  $t("taskDialog.main.value")
                }}：<strong>1970-2099</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-form-item>
              <el-input size="small" v-model="taskConfigTime.month"></el-input
              ><span>{{ $t("taskDialog.main.date.M") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>1-12</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-form-item>
              <span>{{ $t("taskDialog.main.date.txt") }}</span>
              <el-input size="small" v-model="taskConfigTime.week"></el-input
              ><span>{{ $t("taskDialog.main.date.w") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>1-6</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-form-item>
              <span>{{ $t("taskDialog.main.date.w") }}</span>
              <el-input
                size="small"
                v-model="taskConfigTime.day_of_week"
              ></el-input>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>1-7</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * ? / L #</strong>
              </div>
            </el-form-item>
            <el-form-item>
              <el-input size="small" v-model="taskConfigTime.day"></el-input
              ><span>{{ $t("taskDialog.main.date.d") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>1-31</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * ? / L W</strong>
              </div>
            </el-form-item>
            <el-form-item prop="hour">
              <el-input
                size="small"
                v-model="taskConfigTime.hour"
                @blur="addZero"
              ></el-input
              ><span>{{ $t("taskDialog.main.date.h") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>0-23</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-form-item prop="minute">
              <el-input
                size="small"
                v-model="taskConfigTime.minute"
                @blur="addZero"
              ></el-input
              ><span>{{ $t("taskDialog.main.date.m") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>0-59</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-form-item prop="second">
              <el-input
                size="small"
                v-model="taskConfigTime.second"
                @blur="addZero"
              ></el-input
              ><span>{{ $t("taskDialog.main.date.s") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>0-59</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-date-picker
              v-model="taskConfigTime.dateRange"
              value-format="yyyy-MM-dd"
              type="daterange"
              :start-placeholder="$t('taskDialog.main.date.start')"
              :end-placeholder="$t('taskDialog.main.date.end')"
            >
            </el-date-picker>
          </div>
        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">{{
        $t("taskDialog.btn.cancel")
      }}</el-button>
      <el-button type="primary" @click="saveTime">{{
        $t("taskDialog.btn.save")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: [
    "taskCreatedBatchInnerDialogVisible",
    "isInner",
    "createdDataRow",
    "createdDataIndex",
    "taskCreatedBatchList",
  ],
  data() {
    // 分钟和秒钟数验证规则
    var validateSecond = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("不能为空"));
      }
      if (value < 0 || value >= 60) {
        callback(new Error("请输入0-59"));
      }
    };
    // 时钟数验证规则
    var validateHour = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("不能为空"));
      }
      if (value < 0 || value >= 24) {
        callback(new Error("请输入0-23"));
      }
    };
    // 周几验证规则
    var validateOfWeek = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("不能为空"));
      }
      if (value < 0 || value >= 7) {
        callback(new Error("输入0-6"));
      }
      if (
        value == "一" ||
        value == "二" ||
        value == "三" ||
        value == "四" ||
        value == "五" ||
        value == "六" ||
        value == "日" ||
        value == "天"
      ) {
        callback(new Error("小写数字0-6"));
      }
    };
    // 月任务的号数验证规则
    var validateDay = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("不能为空"));
      }
      if (value < 1 || value > 31) {
        callback(new Error("请输入1-31"));
      }
    };
    // 第几周验证规则
    var validateWeek = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("不能为空"));
      }
      if (value < 1 || value > 6) {
        callback(new Error("请输入1-6"));
      }
    };
    // 月数验证规则验证规则
    var validateMonth = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("不能为空"));
      }
      if (value < 1 || value > 12) {
        callback(new Error("请输入1-12"));
      }
    };
    return {
      options: [
        {
          value: "1",
          label: "日常任务",
        },
        {
          value: "2",
          label: "周任务",
        },
        {
          value: "3",
          label: "月任务",
        },
        {
          value: "4",
          label: "定时/计划任务",
        },
      ],
      // 配置时间的数据
      taskConfigTime: {
        taskType: "日常任务", // 任务类型
        year: "", // 年
        month: "", //月
        day: "", // 日
        hour: "", // 时
        minute: "", // 分
        second: "", // 秒
        week: "", // 周
        day_of_week: "", // 每周几
        dateRange: "", // 开始时间和结束时间
      },
      formDataRules: {
        hour: [{ validator: validateHour, trigger: "blur" }],
        minute: [{ validator: validateSecond, trigger: "blur" }],
        second: [{ validator: validateSecond, trigger: "blur" }],
        day_of_week: [{ validator: validateOfWeek, trigger: "blur" }],
        day: [{ validator: validateDay, trigger: "blur" }],
        week: [{ validator: validateWeek, trigger: "blur" }],
        month: [{ validator: validateMonth, trigger: "blur" }],
      },
      // 传递到父组件的值(JSON字符串)
      taskConfigTimeJSON: "",
    };
  },
  methods: {
    // 打开对话框
    open() {
      if (this.createdDataRow.configuration) {
        console.log(
          "有时间配置------",
          JSON.parse(this.createdDataRow.configuration)
        );
        this.taskConfigTime = JSON.parse(this.createdDataRow.configuration);
      } else {
        console.log("暂时没有时间配置");
        this.taskConfigTime = {
          taskType: "日常任务", // 任务类型
          year: "", // 年
          month: "", //月
          day: "", // 日
          hour: "", // 时
          minute: "", // 分
          second: "", // 秒
          week: "", // 周
          day_of_week: "", // 每周几
          dateRange: "", // 开始时间和结束时间
        };
      }
      console.log("索引", this.createdDataIndex);
      console.log("创建任务的所有数据", this.taskCreatedBatchList);
    },
    // 更换任务类型时触发
    taskTypeChange(val) {
      console.log(val);
    },
    // input获得焦点触发事件
    handler(e, val) {
      console.log(e.target.value);
      console.log(val);
    },
    // 小于10的数数字前面加0
    addZero(e) {
      if (e.target.value < 10 && e.target.value.length == 1) {
        e.target.value = "0" + e.target.value;
      }
    },
    // 保存配置时触发
    saveTime() {
      this.taskConfigTime.start_date = this.taskConfigTime.dateRange[0];
      this.taskConfigTime.end_date = this.taskConfigTime.dateRange[1];
      this.taskConfigTimeJSON = JSON.stringify(this.taskConfigTime);
      console.log(this.taskConfigTimeJSON);
      this.$emit("saveTime", this.taskConfigTimeJSON, this.createdDataIndex);
      (this.taskConfigTime = {
        taskType: "日常任务", // 任务类型
        year: "", // 年
        month: "", //月
        day: "", // 日
        hour: "", // 时
        minute: "", // 分
        second: "", // 秒
        week: "", // 周
        day_of_week: "", // 每周几
        dateRange: "", // 开始时间和结束时间
      }),
        this.closeDialog();
    },
    // 关闭对话框
    closeDialog() {
      this.$emit("closeDialog");
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  font-weight: 700;
  color: #606266;
}
.main {
  padding-left: 10px;
  // display: flex;
  .taskTime {
    // display: flex;
    // padding-left: 10px;
    min-width: 620px;
    .el-form-item {
      .el-input {
        width: 150px;
        margin: 0 10px 0 10px;
      }
      div {
        display: inline-block;
        margin-left: 20px;
        strong {
          color: #ff4d4d;
        }
      }
    }

    span {
      // font-size: 16px;
      font-weight: 700;
    }
  }
}
</style>